<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Homepage - Konrad Rosa</title>
    <link rel="stylesheet" href="./css/style.css" />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="./img/favicon/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./img/favicon/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="./img/favicon/favicon-16x16.png"
    />
    <link rel="manifest" href="./img/favicon/site.webmanifest" />
    <link
      rel="mask-icon"
      href="./img/favicon/safari-pinned-tab.svg"
      color="#5bbad5"
    />
    <meta name="msapplication-TileColor" content="#da532c" />
    <meta name="theme-color" content="#ffffff" />
  </head>
  <body class="wrapper">
    <div class="container home">
      <header class="header">
        <div class="logo">
          <a href="index.html" class="logo__link">
            <img class="logo__img" src="img/logo.svg" alt="Logo" />
          </a>
        </div>
        <nav class="navbar">
          <ul class="navbar__list">
            <li class="navbar__item">
              <a href="index.html" class="navbar__link">Home</a>
            </li>
            <li class="navbar__item">
              <a href="about.html" class="navbar__link">About</a>
            </li>
          </ul>
        </nav>
      </header>
      <main class="main-content">
        <section class="hero">
          <div class="hero__text">
            <h2 class="hero__undertitle">Hello everyone, I am</h2>
            <h1 class="hero__title">Konrad Rosa</h1>
            <a class="btn-cta" href="about.html">Learn more</a>
          </div>
          <div alt="Hero Image" class="hero__img"></div>
        </section>
      </main>
    </div>
    <footer class="footer"></footer>
  </body>
</html>
